<template>
  <div>
    <div v-if="flag == 0">
      <div style="margin-left: 10px; padding-top: 10px">
        <el-button type="primary" @click="addTmep">添加模板</el-button>
        <el-button @click="goBack()">返回</el-button>
      </div>
      <div class="mlt">
        <!-- <el-button type="primary" @click="build()">新建</el-button> -->
      </div>
      <div class="ml" style="margin-top: 10px">
        <el-table border :data="tableData" style="width: 100%">
          <!-- <el-table-column label="医生" prop="date" width="120" /> -->
          <el-table-column label="模板名	" prop="template_name" />
          <el-table-column label="报告组名称" prop="report_group_name" />
          <el-table-column label="操作" prop="name">
            <template slot-scope="scope">
              <el-button type="text" @click="build(scope.row)">修改</el-button>
              <el-button type="text" @click="Submit(scope.row)">停用</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog
        :before-close="handleClose"
        title="选择模板组"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-select
          v-model="temppValue"
          placeholder="请选择模板"
          @change="tempChange"
        >
          <el-option
            v-for="item in tepmOptions"
            :key="item.id"
            :label="item.group_name"
            :value="item.id"
          />
        </el-select>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="tempSubmit">确 定</el-button>
        </span>
      </el-dialog>
      <!-- <div style="margin-left: 40%; margin-top: 30px">
        <el-button @click="goBack()">返回</el-button>
      </div> -->
    </div>
    <div v-if="flag == 2">
      <ModifyTemplate
        :ids="ids"
        :reportgroupid="reportgroupid"
        :reportid="reportid"
        @showMain="showMain"
      />
    </div>
    <div v-if="flag == 1">
      <AddRecordTemplet
        :ids="ids"
        :reportgroupid="reportgroupid"
        @showMain="showMain"
      />
    </div>
  </div>
</template>

<script>
  import AddRecordTemplet from './addRecordTemplet.vue'
  import ModifyTemplate from './modifyTemplate.vue'
  import { getUserTemplate, reportGroupList } from '@/api/template'

  export default {
    components: {
      AddRecordTemplet,
      ModifyTemplate,
    },
    props: {
      ids: {
        type: Number,
        required: true,
      },
    },
    data() {
      return {
        flag: 0,
        tableData: [],
        reportgroupid: '',
        temppValue: '',
        tepmOptions: [],
        dialogVisible: false,
        reportid: '',
      }
    },
    watch: {},

    mounted() {
      this.init()
    },
    methods: {
      // 初始化 方法
      init() {
        const params = {
          user_id: this.ids,
        }
        getUserTemplate(params).then((e) => {
          this.tableData = e.data
        })
      },
      showMain(e) {
        this.flag = e
        this.init()
        this.dialogVisible = false
      },
      // 编辑
      build(e) {
        this.reportgroupid = e.id
        this.reportid = e.report_group_id
        this.flag = 2
      },
      addTmep() {
        reportGroupList().then((e) => {
          this.tepmOptions = e.data
          this.dialogVisible = true
        })
      },
      tempSubmit() {
        this.flag = 1
        this.temppValue = ''
      },
      // 选择模板的
      tempChange(e) {
        this.reportgroupid = e
      },
      // 返回
      goBack() {
        this.$emit('showMain', 0)
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done()
          })
          .catch(() => {})
      },
    },
  }
</script>

<style></style>
